<template>
  <div>
   	<div class="weui-header"> 
      <div class="weui-header-left">
        <a href="javascript:void(0)" @click="goMenu()"><i class="icon-x icon-x10"></i></a>
      </div>
      <h1 class="weui-header-title">已点订单</h1>
    </div>

   <div class="has-order">
	   <div class="store-table-ban">
	      <div class="store-table">
	        <p class="storename">{{storeName}}</p>
	        <!-- <p class="table-code">{{tableName}}</p> -->
	      </div>
	    </div>

    <div class="goto-order" v-show="orderList.length==0">
      <p class="font13 col999">您目前没有已点的订单 ~</p>
      <router-link to="/menu">
        <button type="button" class="order-btn">立即点餐</button>
      </router-link>
    </div>

    <ul>
      <li v-for="item in orderList" @click="goDetail(item.orderId)">
        <order :item="item"></order>
      </li>
    </ul>
    

</div>

  </div>
</template>

<script type="text/ecmascript-6">

    import weuiHeader from '../components/weuiHeader';
    import order from '../components/order';

 const SUCCESS = 200;
    export default {
      data() {
          const storeName = localStorage.getItem("storeName");
          const tableName = localStorage.getItem("tableName");
          return {
            orderList:[],
            storeName:storeName,
            tableName:tableName,
          }
        },
        activated(){
            this._getOrderList();
        },
        methods: {
          _getOrderList(){
            const _this = this;
            const token = localStorage.getItem("token");
            const storeId = localStorage.getItem("storeId");
             this.$http({
                type:'get',
                url:'/fastfood/findKCSameDayOrderListInfo?storeId='+storeId,
                headers: {'Authorization':'Basic '+ token }
              }).then((res) => {
                  if(res.data.code==SUCCESS){
                      _this.orderList = res.data.model;
                  }
              });
          },
          goDetail(orderId){
            localStorage.setItem("parentType","hasOrder");
             this.$router.push({name:'orderDetail',query:{orderId:orderId}});
          },
          goMenu(){
              let token = window.localStorage.getItem('token');
              let storeId = window.localStorage.getItem('storeId');
              let tableId = window.localStorage.getItem('tableId');
              let tableName = window.localStorage.getItem('tableName');
              this.$router.push({name:'menu',query:{token:token,storeId:storeId,tableId:tableId,tableName:tableName}});
          }
        },
       components: {
          weuiHeader,
          order
       }
      
    };
</script>

<style lang="less" scoped>

  .has-order{
    padding-top:45px;
    background: #f1f1f1;

    .store-table-ban {
      width: 100%;
      height: 50px;
      background-color: white;
    }
    .store-table {
      text-align: center;
    }
    .storename {
      padding-top: 20px;
      font-size: 16px;
      font-weight: bold;
    }
    .table-code {
      font-size: 13px;
      color: #999;
      margin-top: 8px;
    }

    .goto-order {
      text-align: center;
      padding-top: 85px;
    }

    .order-btn {
      display: block;
      width: 85%;
      height: 40px;
      margin: 0 auto;
      background: #11bbb4;
      color: white;
      border-radius: 4px;
      font-size: 15px;
      letter-spacing: 4px;
      margin-top: 60px;
    }
    
}
	
</style>
